<template>
  <div class="">
    <div class="breadcrumb flex-center">
      <p class="title">名师功能</p>
    </div>
    <div class="box">
      <div class="">
        <p class="mgb-10 f16">网络数据统计</p>
        <div class="flex-center h90" style="background-color:#F9F9F9">
          <p class="linkUrl"><span class="f16 bold ">10</span><span class="f12">网课数</span></p>
          <p class="linkUrl"><span class="f16 bold ">10</span><span class="f12">课件数</span></p>
          <p class="linkUrl"><span class="f16 bold ">10</span><span class="f12">收藏数</span></p>
          <p class="linkUrl"><span class="f16 bold ">10</span><span class="f12">点赞数</span></p>
          <p class="linkUrl"><span class="f16 bold ">10</span><span class="f12">评价数</span></p>
        </div>
      </div>
      <p class="mgt-20 mgb-10 f16">网课课程</p>
      <div class="flex" style="flex-wrap: wrap;">
        <div class="flex mgb-20 relative item" v-for='(i,index) in tableDate' :key='index'>
          <el-image class="cover" :src="i.img" fit="cover"></el-image>
          <i class="type">{{i.type}}</i>
          <i class="read">{{i.num}}人在看</i>
          <div class="pdl-20 pdr-20 pdt-9 pdb-9 flex1 flex-between flex-column">
            <div>
              <p class="line1 bold mgb-5">{{i.title}}</p>
              <div class="flex" style="flex-wrap: wrap;">
                <i class="tag mgb-5" v-if="i.tag!=''" :key='tagIndex' v-for='(tag,tagIndex) in i.tag.split(",")'>{{tag}}</i>
              </div>
            </div>
            <div class="flex" v-if="i.state" style="flex-wrap: wrap;">
              <p class="flex1 color-4E f12">收藏数：22</p>
              <p class="flex1 color-4E f12">点赞数：22</p>
              <p class="flex1 color-4E f12">评价数：22</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableDate: [
        {
          img: require('../../assets/img/图层 12@2x.png'),
          title: '开心心上学去(基础版)',
          tag: '基础班,—年级上册,第一单元',
          teacher: '李晓东',
          num: '275',
          type: '道德与法治',
          state: false,
        },
        {
          img: require('../../assets/img/图层 13@2x.png'),
          title: '开心心上学去(基础版)',
          tag: '基础班,—年级上册,第一单元',
          teacher: '李晓东',
          type: '主题教育',
          num: '999',
          state: true,
        },
        {
          img: require('../../assets/img/图层 14@2x.png'),
          title: '开心心上学去(基础版)',
          tag: '基础班,—年级上册,第一单元',
          teacher: '李晓东',
          type: '成长与信仰',
          num: '66',
          state: true,
        }
      ],
    };
  },
  methods: {},
};
</script>

<style lang="less" scoped>
// @import "../../assets/css/variable.less";
.cover {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
}
.box {
  box-shadow: 1px 2px 33px 5px rgba(204, 204, 204, 0.12);
  border-radius: 7px 7px 7px 7px;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  .cover {
    width: 150px;
    height: 100px;
    border-radius: 6px;
    overflow: hidden;
  }
  .type {
    position: absolute;
    height: 20px;
    line-height: 20px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #1e1e1e6e;
    color: #fff;
    top: 10%;
    left: 0;
    padding: 0 5px;
    font-size: 12px;
    box-sizing: border-box;
  }
  .linkUrl {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: #333;
    text-align: center;
  }
  .read {
    position: absolute;
    width: 150px;
    height: 20px;
    line-height: 20px;
    box-shadow: inset 9px -12px 10px 0px rgba(0, 0, 0, 0.3);
    color: #fff;
    top: 80px;
    left: 0;
    padding: 0 5px;
    font-size: 12px;
    box-sizing: border-box;
    text-align: right;
    border-radius: 6px;
  }
  .item {
    width: 50%;
  }
}
</style>